<template>
  <div class="disposal-statistics">
    <div class="page-header">
      <h2>投放统计</h2>
      <p>查看投放数据统计分析</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-cards">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalDisposals }}</div>
            <div class="stat-label">总投放次数</div>
          </div>
          <el-icon class="stat-icon" color="#409EFF">
            <Box />
          </el-icon>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalWeight }}kg</div>
            <div class="stat-label">总投放重量</div>
          </div>
          <el-icon class="stat-icon" color="#67C23A">
            <Scale />
          </el-icon>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">¥{{ stats.totalRevenue }}</div>
            <div class="stat-label">总收益</div>
          </div>
          <el-icon class="stat-icon" color="#E6A23C">
            <Money />
          </el-icon>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">{{ stats.activeUsers }}</div>
            <div class="stat-label">活跃用户</div>
          </div>
          <el-icon class="stat-icon" color="#F56C6C">
            <User />
          </el-icon>
        </el-card>
      </el-col>
    </el-row>

    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :model="filterForm" inline>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="垃圾类型">
          <el-select v-model="filterForm.wasteType" placeholder="请选择">
            <el-option label="全部" value="" />
            <el-option label="可回收物" value="recyclable" />
            <el-option label="有害垃圾" value="hazardous" />
            <el-option label="湿垃圾" value="wet" />
            <el-option label="干垃圾" value="dry" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="filterForm.deviceId" placeholder="请输入设备编号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card title="投放趋势">
          <div class="chart-container" ref="trendChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card title="垃圾类型分布">
          <div class="chart-container" ref="typeChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card title="设备投放排行">
          <div class="chart-container" ref="deviceChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="table-card">
      <template #header>
        <span>详细统计数据</span>
      </template>
      
      <el-table :data="tableData" v-loading="loading">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="deviceId" label="设备编号" width="120" />
        <el-table-column prop="deviceName" label="设备名称" />
        <el-table-column prop="disposalCount" label="投放次数" width="100" />
        <el-table-column prop="totalWeight" label="总重量(kg)" width="120" />
        <el-table-column prop="revenue" label="收益(元)" width="100" />
        <el-table-column prop="wasteTypes" label="垃圾类型分布" min-width="200">
          <template #default="{ row }">
            <el-tag v-for="type in row.wasteTypes" :key="type.type" size="small" style="margin-right: 5px;">
              {{ type.name }}: {{ type.count }}次
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Box, Scale, Money, User } from '@element-plus/icons-vue'

// 统计数据
const stats = reactive({
  totalDisposals: 15420,
  totalWeight: 8650,
  totalRevenue: 12580,
  activeUsers: 3240
})

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  wasteType: '',
  deviceId: ''
})

// 表格数据
const tableData = ref([
  {
    date: '2024-01-15',
    deviceId: 'RB001',
    deviceName: '智慧回收箱-001',
    disposalCount: 45,
    totalWeight: 28.5,
    revenue: 42.8,
    wasteTypes: [
      { type: 'recyclable', name: '可回收物', count: 25 },
      { type: 'wet', name: '湿垃圾', count: 20 }
    ]
  },
  {
    date: '2024-01-15',
    deviceId: 'RB002',
    deviceName: '智慧回收箱-002',
    disposalCount: 38,
    totalWeight: 22.3,
    revenue: 35.6,
    wasteTypes: [
      { type: 'recyclable', name: '可回收物', count: 20 },
      { type: 'dry', name: '干垃圾', count: 18 }
    ]
  }
])

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 100
})

const loading = ref(false)

// 图表引用
const trendChart = ref()
const typeChart = ref()
const deviceChart = ref()

// 搜索
const handleSearch = () => {
  console.log('搜索条件:', filterForm)
  ElMessage.success('查询成功')
}

// 重置
const handleReset = () => {
  Object.assign(filterForm, {
    dateRange: [],
    wasteType: '',
    deviceId: ''
  })
  ElMessage.info('已重置筛选条件')
}

// 导出
const handleExport = () => {
  ElMessage.success('导出成功')
}

// 分页处理
const handleSizeChange = (size: number) => {
  pagination.size = size
  // 重新加载数据
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  // 重新加载数据
}

onMounted(() => {
  // 初始化图表
  console.log('投放统计页面已加载')
})
</script>

<style scoped>
.disposal-statistics {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
}

.page-header p {
  margin: 0;
  color: #909399;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card :deep(.el-card__body) {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.stat-icon {
  font-size: 40px;
  opacity: 0.8;
}

.filter-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 4px;
  color: #909399;
}

.table-card {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>